<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#div1{
				width: 300px;
				height: 300px;
				background-color: red;
			}
		</style>
	</head>	
	<body>
		<button type="button" onclick="btnClick();">按钮</button>
		<div id="div1" ondblclick="divDbClick();" onmouseenter="enterDiv()"
		onmouseleave="leveaDiv()" onmousemove="moveDiv()">
		</div>
		<form action="" method="post">
			用户名:<input type="text" name="" id="username" value="" onfocus="userNameFocus()"/
			onbonblur="userNameLeave();"><br/>
			密码:<input type="password" name="" id="userpassword" value="" /><br/>
		</form>
		
		<button type="button" onclick="btnClick();">普通按钮1</button>
		<button type="button" id="btn2">普通按钮2</button>
		<button type="button" id="btn3">普通按钮3</button>
		
		<div id="div2" style="width: 300px;height: 300px;border: 1px solid blue;">
			div2内容
		</div>
		<div id="div3" style="width: 300px;height: 300px;border: 1px solid red;">
			div3内容
		</div>
		
		<button type="button" id="btnHello">打印hello world</button>
		<button type="button" onclick="addListener();">添加监听器</button>
		<button type="button" onclick="removeListener();">移除监听器</button>
	</body>
	<script type="text/javascript">
		// 1.按钮和DIV的单击事件（三种绑定方式）
		function btnClick(){
			btnClick1();
			btnClick2();
		}
		function btnClick1(){
			alert('hello world');
		}
		function btnClick2(){
			alert('hello js');
		}
		function divDbClick(){
			console.log('DIV被双击了!')
		}
		// 2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）
		function enterDiv(){
			console.log('进入DIV范围了')
			document.getElementById('div1').style.backgroundColor = 'blue'
		}
		function leveaDiv(){
			console.log('离开DIV范围了')
			document.getElementById('div1').style.backgroundColor = 'red'
		}
		function moveDiv(){
			console.log('别摸我')
		}
		function userNameFocus(){
			console.log('开始输入用户名')
		}
		function userNameLeave(){
			console.log('完成用户名的输入')
			var username = document.getElementById('username')
			var userpassword = document.getElementById('userpassword')
			if(username.value == ''){
			alert('用户名不能为空');
			return;
			}
			if(userpassword.value == ''){
			alert('密码不能为空');
			return;
			}
			if( username.value.length<6){
			alert('用户名不能小于6位');
			return;
			}
			if( username.value=='' || userpassword.value == ''){
			alert('用户名和密码不能为空');
			return;
			}
		}
		
		
		function btnClick(){
			console.log('按钮被点击了')
		}
		function btnClick2(){
			console.log('按钮2被点击了')
		}
		//2 JS内绑定
		// document.getElementById('btn2').onclick = btnClick;
		document.getElementById('btn2').onclick = function(){
			console.log('按钮2被点击了')
		}
		document.getElementById('btn3').onclick = btnClick;
		
		document.getElementById('div2').ondblclick = function(){
			console.log('双击了DIV2')
		}
		//3 监听事件
		//3.1 添加监听器
		// document.getElementById('div3').addEventListener('dblclick',function(){
		// 	console.log('双击了DIV3')
		// })
		function aa(){
			console.log('双击了DIV3')
		}
		document.getElementById('div3').addEventListener('dblclick',aa)
		//3.2 清除监听器
		
		function SayHello(){
			console.log('hello world')
		}
		function addListener(){
			
			document.getElementById('btnHello').addEventListener('click',SayHello)
			
		}
		function removeListener(){
			
			document.getElementById('btnHello').removeEventListener('click',SayHello)
			
		}
	</script>
</html>
